<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<meta charset="UTF-8" />
<title>【顺风车】 - 订单</title>
<link rel="stylesheet" href="../../static/assets/css/amazeui.css" th:href="@{/assets/css/amazeui.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/amaze.min.css" th:href="@{/assets/css/amaze.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/common.min.css" th:href="@{/assets/css/common.min.css}" />
<link rel="stylesheet" href="../../static/assets/css/other.min.css" th:href="@{/assets/css/other.min.css}" />
</head>
<body class="register-container">
	<div th:include="common/header::header"></div>

	<!--===========layout-container================-->
	<div class="layout-container">

		<div class="am-container" style="margin-top: 20px;">
			<div class="am-panel am-panel-primary">
				<div class="am-panel-footer">
					<form class="am-form" th:action="@{/front/chepiao}" method="get" style="margin: 10px;">
						<ul class="am-avg-sm-4 am-thumbnails">
							<li>
								<div class="am-input-group">
									<span class="am-input-group-label"> 出发地 </span>
									<select class="am-radius" id="startProvinces" name="startProvinces">
										<option value="">选择省</option>
										<option th:each="provinces : ${provincesList}" th:value="${provinces.provinceid}"
											th:text="${provinces.province}">provinces</option>
									</select>
								</div>
							</li>
							<li>
								<select class="am-radius" id="startCities" name="startCities">
									<option value="">选择市</option>
								</select>
							</li>
							<li>
								<div class="am-input-group">
									<span class="am-input-group-label"> 目的地 </span>
									<select class="am-radius" id="endProvinces" name="stopProvinces">
										<option value="">选择省</option>
										<option th:each="provinces : ${provincesList}" th:value="${provinces.provinceid}"
											th:text="${provinces.province}">provinces</option>
									</select>
								</div>
							</li>
							<li>
								<select class="am-radius" id="endCities" name="stopCities">
									<option value="">选择市</option>
								</select>
							</li>
							<li>
								<input type="text" class="am-form-field am-radius" name="goDate" placeholder=" 出发日期"
									onclick="laydate({istime:true,istime:false,format:'YYYY-MM-DD',min:laydate.now()})" />
							</li>
							<li>
								<button type="submit" class="am-btn am-btn-secondary am-radius">&nbsp;搜&nbsp;&nbsp;索&nbsp;</button>
							</li>
						</ul>
					</form>
				</div>
			</div>
		</div>
	</div>

	<div class="am-container">
		<table class="am-table am-table-striped am-table-hover am-table-centered">
			<thead style="background-color: #0e90d2; color: #ffffff;">
				<tr>
					<th class="am-text-middle am-text-sm" width="80">头像</th>
					<th class="am-text-middle am-text-sm" width="120">名称</th>
					<th class="am-text-middle am-text-sm">出发地<br />目的地
					</th>
					<th class="am-text-middle am-text-sm" width="120">出发日期</th>
					<th class="am-text-middle am-text-sm" width="120">出发时间</th>
					<th class="am-text-middle am-text-sm" width="60">票价</th>
					<th class="am-text-middle am-text-sm" width="60">预订</th>
				</tr>
			</thead>
			<tbody>
				<tr th:each="order : ${page.content}">
					<td>
						<img th:src="${order.user.imageName}" class="am-img-responsive am-circle" alt="" width="80" height="80" />
					</td>
					<td class="am-text-middle am-text-xs" th:text="${order.user.realName}"></td>
					<td class="am-text-middle am-text-xs am-text-left">
						<p class="am-text-truncate">
							<span class="am-badge am-badge-secondary am-radius">起</span>
							<span th:utext="${order.startProvinces}?${order.startProvinces.province}"></span>
							<span th:text="${order.startCities}?${order.startCities.city}"></span>
							<span th:text="${order.startAddress}"></span>
							<br />
							<span class="am-badge am-badge-danger am-radius">终</span>
							<span th:utext="${order.stopProvinces}?${order.stopProvinces.province}"></span>
							<span th:text="${order.stopCities}?${order.stopCities.city}"></span>
							<span th:text="${order.stopAddress}"></span>
						</p>
					</td>
					<td class="am-text-middle am-text-xs" th:text="${order.goDate}"></td>
					<td class="am-text-middle am-text-xs" th:text="${order.goTime}"></td>
					<td class="am-text-middle am-text-xs" th:text="${order.price1}"></td>
					<td class="am-text-middle am-text-xs">
						<a sec:authorize="${hasAnyAuthority(1)}" th:href="@{'/front/order/reserve/yuding/'+${order.id}}"
							class="am-btn am-btn-primary am-text-xs">预订</a>
						<a sec:authorize="${hasAnyAuthority(2)}" th:href="@{'/front/order/reserve/qiangdan/'+${order.id}}"
							class="am-btn am-btn-primary am-text-xs">抢单</a>
					</td>
				</tr>
			</tbody>
		</table>
		<div id="page"></div>
	</div>

	<br />

	<div th:include="common/footer::footer"></div>

	<script src="../../static/assets/js/jquery-2.1.0.js" charset="utf-8" th:src="@{/assets/js/jquery-2.1.0.js}"></script>
	<script src="../../static/assets/js/amazeui.js" charset="utf-8" th:src="@{/assets/js/amazeui.js}"></script>
	<script src="../../static/assets/laypage/laypage.js" charset="utf-8" th:src="@{/assets/laypage/laypage.js}"></script>
	<script src="../../static/assets/laydate/laydate.js" charset="utf-8" th:src="@{/assets/laydate/laydate.js}"></script>
	<script src="../../static/assets/js/core.js" charset="utf-8" th:src="@{/assets/js/core.js}"></script>
</body>
<script type="text/javascript" th:inline="javascript">
	laydate.skin('danlan');

	$("#startProvinces").cascade({
		url : [[@{/front/cities/}]],
		optionsText : 'city',
		optionsValue : 'cityid',
		value : '#startCities'
	});

	$("#endProvinces").cascade({
		url : [[@{/front/cities/}]],
		optionsText : 'city',
		optionsValue : 'cityid',
		value : '#endCities'
	});
	
	laypage({
		cont : 'page',
		pages : [[${page.totalPages}]],
		curr : function() {
			var page = location.search.match(/page=(\d+)/);
			return page ? page[1] : 1;
		}(),
		jump : function(e, first) {
			if (!first) {
				location.href = '?page=' + e.curr;
			}
		}
	});
</script>
</html>
